<template>
  <div>
    <div class="dashboard-container">
      

      <div class="big-back-box">
        <div class="top">订单支付</div>
      <div style="height: 20px"></div>
        <el-card class="box-card" style="width: 500px; margin: 0 auto">
          <el-select v-model="value" placeholder="请选择支付方式">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
            <el-button style="float: right" @click="pay"
             type="success"
             :disabled="value==''"
            >确定支付</el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {payForOrder} from "@/api/order"
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "微信支付",
        },
        {
          value: "选项2",
          label: "支付宝支付",
        },
      ],
      value: "",
    };
  },
  methods: {
    pay() {
      this.$confirm("确定购买?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          payForOrder(this.$route.query.id).then(res=>{
            console.log(res.data);
            if(res.data.result){
             this.$message({
             type: "success",
             message: "支付成功!",
          });
           this.$router.push({path:"/customerCenter/customerOrder/orderList"})
       }
          })
       
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消购买",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1080px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>